<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="人员调岗"></u-navbar>
		<view class="d-p-30">
			<view><text class="d-font-36" style="font-weight: bold;">人员信息</text></view>
			<view class="d-m-t-30">
				<view
					class="card d-p-30 d-m-b-30"
					v-for="(item, index) in 3"
					:key="index"
					:style="{
						height: demo ? '220rpx' : '120rpx'
					}"
				>
					<view class="d-flex d-col-bottom">
						<u--image src="https://cdn.uviewui.com/uview/swiper/swiper2.png" radius="10rpx" width="120rpx" height="120rpx"></u--image>
						<view class="d-flex-1 d-p-l-30">
							<view class="d-flex">
								<view class="d-font-28" style="color: #151C24;font-weight: bold;">张三</view>
								<text class="d-font-28 d-m-l-74" style="color: #5D6672;">男</text>
							</view>
							<view class="d-flex d-font-24 d-m-t-25">
								<text class="" style="color: #5D6672;">证件号码</text>
								<text class="d-flex-1 d-m-l-20" style="color: #162233;">513701199858584512</text>
								<text class="" style="color: #5D6672;" @click="demo = !demo">展开</text>
							</view>
						</view>
					</view>
					<u-transition :show="demo" duration="100">
						<view class="d-font-24 d-m-t-20">
							<view class="d-flex">
								<view class="d-flex-1">
									<text class="" style="color: #5D6672;">班组</text>
									<text class="d-m-l-20" style="color: #162233;">某某班组</text>
								</view>
								<view class="d-flex-1">
									<text class="" style="color: #5D6672;">项目</text>
									<text class="d-m-l-20" style="color: #162233;">某某某某某某项目</text>
								</view>
							</view>
							<view class="d-m-t-10">
								<text class="" style="color: #5D6672;">企业</text>
								<text class="d-m-l-20" style="color: #162233;">某某某某某某企业</text>
							</view>
						</view>
					</u-transition>
				</view>
			</view>

			<view class="d-font-28" style="color: #21A5F3;" @click="transferSelectMember">选择调岗人员</view>
			<view class="d-font-28 d-m-t-30" style="color: #21A5F3;" @click="transferSelectTeam">选择调岗班组</view>
			<!-- todo 这个人员是选择的 -->
			<view class="card d-p-30 d-m-t-30" @click="transferSelectTeam">
				<view class="d-font-32 d-m-b-20" style="font-weight: bold;color: #151C24;">调岗班组</view>
				<view class="d-flex" style="color: #5D6672;">
					<view class="d-font-24" style="flex: 3;">
						<text style="">班组长</text>
						<text class="d-m-l-20" style="color: #162233;font-weight: bold;">李四</text>
					</view>
					<view class="d-font-24" style="flex: 2;">
						<text style="">联系电话</text>
						<text class="d-m-l-20" style="color: #162233;font-weight: bold;">1532323415</text>
					</view>
				</view>
				<view class="d-flex d-m-t-20" style="color: #5D6672;">
					<view class="d-font-24" style="flex: 3;">
						<text style="">班组人数</text>
						<text class="d-m-l-20" style="color: #162233;font-weight: bold;">20人</text>
					</view>
					<view class="d-font-24" style="flex: 2;">
						<text style="">所属单位</text>
						<text class="d-m-l-20" style="color: #162233;font-weight: bold;">12人</text>
					</view>
				</view>
			</view>

			<view class="card d-p-30 d-m-t-30">
				<view class="d-font-32 d-m-b-20" style="font-weight: bold;color: #151C24;">调离原因</view>
				<u--textarea placeholder="请输入内容"></u--textarea>
			</view>

			<view class="card d-m-t-30 d-p-30">
				<view class="d-flex d-m-b-20">
					<view class="d-font-32 d-flex-1" style="color: #151C24;font-weight: bold;">添加附件</view>
					<view>
						<u-button text="上传" size="mini" type="primary"></u-button>
					</view>
				</view>
				<view class="table">
					<view class="tr">
						<view class="th d-p-l-30">序号</view>
						<view class="th">附件</view>
						<view class="th">数量</view>
					</view>
					<view class="tr" v-for="(item, index) in 3" :key="index">
						<view class="td d-p-l-30">{{ item }}</view>
						<view class="td"><text style="color: #21A5F3;">开发资源</text></view>
						<view class="td">1</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom u-safe-area-inset-bottom">
			<view class="u-safe-area-inset-bottom d-flex u-border-top">
				<view class="d-flex-1 d-m-r-20"><u-button text="取消" @click="back"></u-button></view>
				<view class="d-flex-1"><u-button text="提交申请" type="primary"></u-button></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			demo: false
		};
	},
	methods: {
		back() {
			uni.$u.route({
				type: 'back'
			});
		},
		transferSelectMember() {
			uni.$u.route({
				url: '/pages/index/member/transferSelectMember'
			})
		},
		transferSelectTeam() {
			uni.$u.route({
				url: '/pages/index/member/transferSelectTeam'
			})
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fbfcfc;
	.card {
		box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		background-color: #ffffff;
		-webkit-transition: height 0.3s;
		transition: height 0.3s;

		.table {
			font-size: 28rpx;
			display: table;
			width: 100%;
			vertical-align: middle;
			border: 1px solid #f6f7f8;
			.tr {
				display: table-row;
				.th,
				.td {
					display: table-cell;
					height: 80rpx;
					vertical-align: middle;
				}
				.th {
					font-weight: bold;
					color: #162233;
				}
				&:nth-child(2n-1) {
					background-color: #f6f7f8;
				}
			}
		}
	}

	.bottom {
		height: 140rpx;
		box-sizing: content-box;
		& > view {
			height: 140rpx;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #ffffff;
			padding-left: 30rpx;
			padding-right: 30rpx;
		}
	}
}
</style>
